<template>
        <div class="count">
            <h2>当前求和为：{{sum }},放大10倍{{ bigSum }}</h2>
            <select v-model.number="n">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <button @click="jia">加</button>
            <button @click="jian">减</button>
        </div>
</template>
    
<script setup lang='ts'>
import { ref, toRefs } from 'vue';
import { useCountStroe } from '@/store/count';
import { storeToRefs } from 'pinia';

//使用useCounStore，得到一个专门保存count相关的stroe 
const countStore = useCountStroe()

// let {sum} = toRefs(countStore)
let {sum,bigSum} = storeToRefs(countStore)

let n = ref(1)

function jia() {
    // 第一种方法
    // countStore.sum += n.value

    // 第二种方法,$patch()批量同时修改
    // countStore.$patch({
    //     sum:99
    // })

    // 第三种方法
    countStore.increment(n.value)

}
function jian() {
    countStore.sum -= n.value
        
    }
</script>
    
<style>
    .count{
        background-color: skyblue;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        select,button{
            margin:0 10px;
            height: 25px;
        }
    }
</style>